<template>
	<block  v-if="loading">
		<view class="content">
			<view class="list" @click.prevent="" v-for="item in 3" :key="item">
				<view class="list_top">
					<view class="list_serviceName" >
						
					</view>
					<view class="list_status" >
						
					</view>
				</view>
				<view class="list_split">
					
				</view>
				<view class="list_name" >
					
				</view>
				<view class="list_name" style="width: 350rpx;">
					
				</view>
				<view class="list_number">
					
				</view>
				<view class="">
					<view class="list_price">
						
					</view>
				</view>
				<view class="list_bottom">
					<view class="list_detaile one" ></view>
					<view class="list_detaile" ></view>	
				</view>
			</view>
		</view>
	</block>
	<block v-else>
		<view class="">
			<slot></slot>
		</view>
	</block>
</template>

<script>
	export default {
		props: {
			loading: {
				type: Boolean,
				default: true
			},
			animate: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {};
		},
	};
	
</script>

<style lang="scss" scoped>
	.content{
		animation: skeleton-blink 1.2s ease-in-out infinite;
	}
	@keyframes skeleton-blink {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 0.6;
		}
		100% {
			opacity: 1;
		}
	}
	.list{
		margin: 0 auto;
		width: 710rpx;
		background: rgba(255, 255, 255, 0.6);
		padding: 28rpx 20rpx ;
		box-sizing: border-box;	
		border-radius: 20rpx;
		// display: flex;
		// justify-content: space-between;
		margin-top: 16rpx ;
		.list_top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.list_serviceName{
				background-color: #ededed;
				border-radius: 10rpx;
				width: 200rpx;
				height: 40rpx;
			}
			.list_status{
				background-color: #ededed;
				border-radius: 10rpx;
				width: 84rpx;
				height: 40rpx;
				
			}
		}
		.list_split{
			width: 634rpx;
			height: 2rpx;
			background: rgba(240, 240, 240, 0.6);
			margin: 28rpx auto;
		}
		.list_name{
			background-color: #ededed;
			border-radius: 10rpx;
			width: 280rpx;
			height: 40rpx;
			margin-bottom: 10rpx;
		}
		.list_number{
			background-color: #ededed;
			border-radius: 10rpx;
			height: 40rpx;
			width: 600rpx;
			margin-bottom: 10rpx;
			
		}
		.list_price{
			background-color: #ededed;
			border-radius: 10rpx;
			height: 40rpx;
			width: 140rpx;
			margin-bottom: 10rpx;
			right: 0;
		}
		.list_bottom{
			display: flex;
			justify-content: flex-end;
			.list_detaile{
				width: 160rpx;
				height: 72rpx;
				background: #3C8EFF;
				border-radius: 20rpx;
				line-height: 72rpx;
				text-align:center;
				font-size: 28rpx;
				margin-left: 24rpx;
			}
			.one{
				background: #ededed;
				// display: none;
			}
		}
	}
</style>